<template>
    <div>
        <el-table :data="tableData" stripe border style="width: 100%">
            <slot></slot>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="curPage.currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" :total="400" layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        fetch: {
            type: Function,
            default: Promise.resolve()
        }
    },
    data() {
        return {
            tableData: [],
            curPage: {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {
        this.tableData = this.fetch();
    }
}
</script>
<style lang="less" scoped>
    .el-button--text.danger {
        color: #f56c6c;
    }
</style>
